<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<!-- ... 保持与blog.html相同的head部分 ... -->
	<title>购物车——大连万达耐酸泵厂有限公司</title>
	<meta content="购物车,大连万达耐酸泵厂,大连万达耐酸泵厂有限公司" name="keywords">
	<!-- Favicons -->
	<link href="assets/img/logo.png" rel="icon">
	<!-- 网页图标 -->
	<!-- Google Fonts -->
	<link
		href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap"
		rel="stylesheet">

	<!-- Vendor CSS Files -->
	<link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
	<!-- 一个流行的CSS动画库提供了许多预设的动画效果，如淡入淡出、滑动、缩放等在您的网站中用于元素的过渡动画 -->
	<link href="assets/vendor/aos/aos.css" rel="stylesheet">
	<!-- AOS (Animate On Scroll) 滚动动画库的样式文件控制页面元素在滚动时的动画效果您网站中的 data-aos="fade-up" 就是使用这个库 -->
	<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!-- Bootstrap框架的核心CSS文件提供网格系统、组件样式和响应式布局您网站大量使用了Bootstrap的类，如 container, row, col-lg-8 等 -->
	<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
	<!-- Bootstrap的图标库提供了大量的矢量图标您网站中的 bi-trash, bi-arrow-up-short 等图标来自这里 -->
	<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
	<!-- 另一个高质量的图标库提供了更多的图标选择您网站footer中的 bx-chevron-right 等图标来自这里 -->
	<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
	<!-- 一个轻量级的灯箱效果库用于图片查看、幻灯片展示等可能用于产品图片的放大预览 -->
	<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
	<!-- Swiper滑块/轮播组件的样式文件用于创建触摸滑动的轮播图、图片展示等可能用于您网站的产品展示轮播 -->
	<!-- Template Main CSS File -->
	<link href="assets/css/style.css" rel="stylesheet">

	<link href="assets/css/dlwd.css" rel="stylesheet">
	<style>
		/* 购物车相关样式 */
		.cart-item {
			background: #fff;
			border-radius: 5px;
			transition: all 0.3s ease;
		}

		.cart-item:hover {
			box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
		}

		.cart-summary {
			background: #fff;
			border-radius: 5px;
		}

		.quantity input {
			text-align: center;
		}

		.quantity input::-webkit-outer-spin-button,
		.quantity input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	</style>
</head>

<body>
	<!-- ======= Header ======= -->
	<header id="header" class="fixed-top d-flex align-items-center ">
		<div class="container d-flex justify-content-between align-items-center">

			<div class="logo">
				<h1 class="text-light">
					<a href="index.html">
						<img src="assets/img/logo.png" alt="" class="img-fluid">
						<span>大连万达耐酸泵厂</span>
					</a>
				</h1>
			</div>

			<nav id="navbar" class="navbar">
				<ul>
					<li><a href="index.html">主页</a></li>
					<li><a href="about.html">关于</a></li>
					<li><a href="portfolio.html">产品</a></li>
					<li class="dropdown"><a href="#"><span>更多</span> <i class="bi bi-chevron-down"></i></a>
						<ul>
							<li><a href="sign.html">登录|注册</a></li>
							<li class="dropdown"><a href="portfolio.html"><span>产品详情</span> <i
										class="bi bi-chevron-right"></i></a>
								<ul>
									<li><a href="portfolio.html">立式泵</a></li>
									<li><a href="portfolio.html">卧式泵</a></li>
									<li><a href="portfolio.html">多级泵</a></li>
								</ul>
							</li>
							<li><a href="blog.html">公告</a></li>
						</ul>
					</li>
					<li><a href="contact.html">联系我们</a></li>
					<li class="dropdown"><a class="active " href="#"><span>购物车</span> <i class="bi bi-chevron-down"></i></a>
						<ul>
							<li><a href="cart.html">查看购物车</a></li>
							<li><a href="checkout.html">收银台</a></li>
							<li><a href="orders.html">我的订单</a></li>
						</ul>
					</li>
				</ul>
				<i class="bi bi-list mobile-nav-toggle"></i>
			</nav>
			<!-- .navbar -->

		</div>
	</header>
	<!-- End Header -->

	<main id="main">
		<!-- 面包屑导航 -->
		<section class="breadcrumbs">
			<div class="container">
				<div class="d-flex justify-content-between align-items-center">
					<h2>购物车</h2>
					<ol>
						<li><a href="index.html">主页</a></li>
						<li>购物车</li>
					</ol>
				</div>
			</div>
		</section>

		<!-- 购物车内容区域 -->
		<section id="cart" class="cart">
			<div class="container" data-aos="fade-up">
				<div class="row">
					<div class="col-lg-8">
						<!-- 购物车商品列表 -->
						<div class="cart-items">
							<article class="cart-item d-flex align-items-center p-3 mb-3 border">
								<div class="item-img me-3">
									<img src="assets/img/portfolio/portfolio-1.jpg" alt="" style="width: 100px;">
								</div>
								<div class="item-details flex-grow-1">
									<h4><a href="products/DC(G)石化流程泵/DC(G)石化流程泵.html">立式耐酸泵</a></h4>
									<p class="text-muted">型号：WF100-65-25</p>
									<div class="quantity d-flex align-items-center">
										<button class="btn btn-sm btn-outline-secondary">-</button>
										<input type="number" class="form-control mx-2" style="width: 60px;" value="1">
										<button class="btn btn-sm btn-outline-secondary">+</button>
									</div>
								</div>
								<div class="item-price mx-3">
									<h5>¥7,998</h5>
								</div>
								<button class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></button>
							</article>
						</div>
					</div>

					<!-- 购物车总结 -->
					<div class="col-lg-4">
						<div class="cart-summary p-4 border">
							<h3 class="sidebar-title">订单摘要</h3>
							<div class="d-flex justify-content-between mb-3">
								<span>商品总额</span>
								<span>¥7,998</span>
							</div>
							<div class="d-flex justify-content-between mb-3">
								<span>运费</span>
								<span>¥1,200</span>
							</div>
							<hr>
							<div class="d-flex justify-content-between mb-4">
								<strong>总计</strong>
								<strong>¥9,198</strong>
							</div>
							<a href="checkout.html"><button class="btn btn-primary w-100">结算</button></a>
						</div>

						<!-- 优惠码输入 -->
						<div class="mt-4 p-4 border">
							<h3 class="sidebar-title">优惠码</h3>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="输入优惠码">
								<button class="btn btn-outline-secondary">应用</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</main>

	<!-- ======= Footer ======= -->
	<footer id="footer" data-aos="fade-up" data-aos-easing="ease-in-out" data-aos-duration="500">

		<div class="wallpaper">
			<form action="https://cn.bing.com" class="input-data">
				<input type="text" name="q" required="" value=""
					placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大连万达耐酸泵厂" />
				<div class="underline"></div>
				<label>Search</label>
			</form>
		</div>
		<div class="footer-newsletter">
			<div class="container">
				<div class="row">

				</div>
			</div>
		</div>

		<div class="footer-top">
			<div class="container">
				<div class="row">

					<div class="col-lg-3 col-md-6 footer-links">
						<h4>List Of Links</h4>
						<ul>
							<li><i class="bx bx-chevron-right"></i> <a href="index.html">主页</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="about.html">关于</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="blog.html">公告</a></li>
						</ul>
					</div>

					<div class="col-lg-3 col-md-6 footer-links">
						<h4>Our Products</h4>
						<ul>
							<li><i class="bx bx-chevron-right"></i> <a href="portfolio.html">立式泵</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="portfolio.html">卧式泵</a></li>
							<li><i class="bx bx-chevron-right"></i> <a href="portfolio.html">多级泵</a></li>
						</ul>
					</div>

					<div class="col-lg-3 col-md-6 footer-contact">
						<h4>Contact Us</h4>
						<p>
							<strong>电话：</strong> 13941149568<br>
							<strong>座机：</strong> 0411-86840448<br>
							<strong>邮箱：</strong> <a class="lianjie" href="mailto:dl.wd@163.com"
								style="text-decoration:none;">dl.wd@163.com</a><br>
						</p>

					</div>

					<div class="col-lg-3 col-md-6 footer-info">
						<h3>About Us</h3>
						<p class="suojin">我们倡导与客户相互信任与尊重。共同建立广泛对等合作和战略伙伴关系，并积极探索在互利基础上的多种合作形式。</p>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="copyright">
				&copy; Copyright <strong><span>大连万达耐酸泵厂有限公司</span></strong>. All Rights Reserved
			</div>
			<div class="copyright">
				<a class="lianjie" href="https://beian.miit.gov.cn/" target="_blank">辽ICP备2022006841号-1</a>
			</div>
		</div>
	</footer><!-- End Footer -->

	<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i
			class="bi bi-arrow-up-short"></i></a>

	<!-- Vendor JS Files -->
	<script src="assets/vendor/purecounter/purecounter.js"></script>
	<!-- 数字计数动画库用于实现数字从0到目标值的平滑计数效果常用于展示统计数据，如"销售量"、"用户数"等
	 // 示例
		<div data-purecounter-start="0" 
     		data-purecounter-end="1000" 
     		class="purecounter">
		</div> 
	-->
	<script src="assets/vendor/aos/aos.js"></script>
	<!-- AOS (Animate On Scroll) 滚动动画库的JavaScript文件控制页面元素在滚动时的动画效果您网站中的 data-aos="fade-up" 就是使用这个库 -->
	<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<!-- Bootstrap框架的JavaScript组件包包含了所有Bootstrap的交互功能处理导航栏、下拉菜单、模态框等 -->
	<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
	<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
	<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
	<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>

	<!-- Template Main JS File -->
	<script src="assets/js/main.js"></script>
	<script>
		// 更新购物车总价的函数
		function updateCartTotal() {
			let total = 0;
			// 计算所有商品的总价
			document.querySelectorAll('.cart-item').forEach(item => {
				const price = parseFloat(item.querySelector('.item-price h5').textContent.replace('¥', '').replace(',', ''));
				const quantity = parseInt(item.querySelector('.quantity input').value);
				total += price * quantity;
			});

			// 更新显示总价（使用更具体的选择器并添加错误处理）
			try {
				// 更新商品总额
				const subtotalElement = document.querySelector('.cart-summary .d-flex:first-child span:last-child');
				if (subtotalElement) {
					subtotalElement.textContent = '¥' + total.toLocaleString();
				}

				// 更新最终总计
				const totalElement = document.querySelector('.cart-summary .d-flex:last-child strong:last-child');
				if (totalElement) {
					totalElement.textContent = '¥' + total.toLocaleString();
				}
			} catch (error) {
				console.error('更新总价时出错:', error);
			}
		}

		// 购物车数量调节功能
		document.querySelectorAll('.quantity').forEach(quantityGroup => {
			const minusBtn = quantityGroup.querySelector('button:first-child');
			const plusBtn = quantityGroup.querySelector('button:last-child');
			const input = quantityGroup.querySelector('input');

			// 设置最小值和最大值
			const minValue = 1;
			const maxValue = 99;

			// 减少数量
			minusBtn.addEventListener('click', () => {
				let currentValue = parseInt(input.value);
				if (currentValue > minValue) {
					input.value = currentValue - 1;
					updateCartTotal(); // 更新总价
				}
			});

			// 增加数量
			plusBtn.addEventListener('click', () => {
				let currentValue = parseInt(input.value);
				if (currentValue < maxValue) {
					input.value = currentValue + 1;
					updateCartTotal(); // 更新总价
				}
			});

			// 直接输入数字时的验证
			input.addEventListener('change', () => {
				let currentValue = parseInt(input.value);
				if (isNaN(currentValue) || currentValue < minValue) {
					input.value = minValue;
				} else if (currentValue > maxValue) {
					input.value = maxValue;
				}
				updateCartTotal(); // 更新总价
			});
		});

		// 页面加载完成后初始化总价
		document.addEventListener('DOMContentLoaded', () => {
			updateCartTotal();
		});
	</script>
</body>

</html>